<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>信息录入系统</title><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/element-plus/dist/index.full.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><style>* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        
        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .page-header {
            margin-bottom: 24px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        
        .page-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 8px 0;
            font-size: 28px;
            font-weight: 600;
            color: #1a1a1a;
        }
        
        .page-description {
            margin: 0;
            color: #606266;
            font-size: 16px;
        }
        
        .stats-row {
            margin-bottom: 24px;
        }
        
        .stat-card {
            height: 140px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(135deg, #f9f9f9, #ffffff);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .stat-content {
            display: flex;
            align-items: center;
            height: 100%;
            gap: 20px;
            padding: 0 25px;
        }
        
        .stat-icon {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .total-tables .stat-icon {
            background: rgba(64, 158, 255, 0.15);
            color: #409EFF;
        }
        
        .total-records .stat-icon {
            background: rgba(103, 194, 58, 0.15);
            color: #67C23A;
        }
        
        .buildings .stat-icon {
            background: rgba(230, 162, 60, 0.15);
            color: #E6A23C;
        }
        
        .system-status .stat-icon {
            background: rgba(245, 108, 108, 0.15);
            color: #F56C6C;
        }
        
        .system-status.online .stat-icon {
            background: rgba(103, 194, 58, 0.15);
            color: #67C23A;
        }
        
        .stat-info h3 {
            margin: 0 0 8px 0;
            font-size: 32px;
            font-weight: 700;
            color: #1a1a1a;
        }
        
        .stat-info p {
            margin: 0;
            font-size: 16px;
            color: #606266;
        }
        
        .detail-row {
            margin-bottom: 24px;
        }
        
        .el-card {
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
            border: none;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #ebeef5;
        }
        
        .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 18px;
            color: #1a1a1a;
        }
        
        .table-name {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .table-link {
            color: #409EFF;
            text-decoration: none;
            font-weight: 500;
            font-size: 15px;
        }
        
        .table-link:hover {
            text-decoration: underline;
        }
        
        .quick-actions {
            margin-bottom: 24px;
        }
        
        .action-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            padding: 20px;
        }
        
        .action-buttons .el-button {
            display: flex;
            align-items: center;
            gap: 10px;
            height: 60px;
            padding: 0 30px;
            font-size: 18px;
            font-weight: 500;
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        
        .action-buttons .el-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .fix-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 25px;
            background: #67C23A;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .action-buttons {
                flex-direction: column;
            }
            
            .action-buttons .el-button {
                width: 100%;
                justify-content: center;
            }
            
            .stat-card {
                height: auto;
                padding: 20px 0;
            }
            
            .stat-content {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }
        }</style><script defer="defer" src="static/js/vendors.94fcf89c.js"></script><script defer="defer" src="static/js/app.1ac89057.js"></script><link href="static/css/vendors.746c067c.css" rel="stylesheet"><link href="static/css/app.887564b0.css" rel="stylesheet"></head><body><div id="app"><div class="dashboard"><div class="page-header"><h2 class="page-title"><el-icon><i-ep-data-analysis/></el-icon>数据仪表板</h2><p class="page-description">系统总体运行状况和数据统计概览</p></div><el-row :gutter="20" class="stats-row"><el-col :xs="24" :sm="12" :md="6"><el-card class="stat-card total-tables"><div class="stat-content"><div class="stat-icon"><el-icon size="40"><i-ep-grid/></el-icon></div><div class="stat-info"><h3>{{ statistics.tableCount || 0 }}</h3><p>数据表总数</p></div></div></el-card></el-col><el-col :xs="24" :sm="12" :md="6"><el-card class="stat-card total-records"><div class="stat-content"><div class="stat-icon"><el-icon size="40"><i-ep-document/></el-icon></div><div class="stat-info"><h3>{{ formatNumber(statistics.totalRecords) }}</h3><p>数据记录总数</p></div></div></el-card></el-col><el-col :xs="24" :sm="12" :md="6"><el-card class="stat-card buildings"><div class="stat-content"><div class="stat-icon"><el-icon size="40"><i-ep-house/></el-icon></div><div class="stat-info"><h3>{{ buildingCount }}</h3><p>建筑信息记录</p></div></div></el-card></el-col><el-col :xs="24" :sm="12" :md="6"><el-card class="stat-card system-status" :class="{ online: systemOnline }"><div class="stat-content"><div class="stat-icon"><el-icon size="40"><i-ep-monitor/></el-icon></div><div class="stat-info"><h3>{{ systemOnline ? '在线' : '离线' }}</h3><p>系统状态</p></div></div></el-card></el-col></el-row><el-row :gutter="20" class="detail-row"><el-col :span="24"><el-card><template #header><div class="card-header"><span class="card-title"><el-icon><i-ep-memo/></el-icon>各表数据统计详情</span><el-button type="primary" size="small" @click="refreshData"><el-icon><i-ep-refresh/></el-icon>刷新数据</el-button></div></template><el-table :data="tableStats" style="width: 100%" v-loading="loading"><el-table-column prop="tableName" label="表名" min-width="150"><template #default="{ row }"><div class="table-name"><el-icon><i-ep-grid/></el-icon><a href="#" class="table-link" @click.prevent="viewData(row.tableName)">{{ row.tableName }}</a></div></template></el-table-column><el-table-column prop="recordCount" label="记录数量" width="120" align="center"><template #default="{ row }"><el-tag :type="getCountTagType(row.recordCount)">{{ formatNumber(row.recordCount) }}</el-tag></template></el-table-column><el-table-column prop="percentage" label="占比" width="120" align="center"><template #default="{ row }">{{ statistics.totalRecords ? ((row.recordCount / parseInt(statistics.totalRecords) * 100).toFixed(1) + '%' : '0.0%' }}</template></el-table-column><el-table-column label="数据量级别" width="120" align="center"><template #default="{ row }"><el-tag :type="getStatusTagType(row.recordCount)">{{ getDataLevel(row.recordCount) }}</el-tag></template></el-table-column><el-table-column label="操作" width="200" align="center"><template #default="{ row }"><el-button type="primary" size="small" @click="viewData(row.tableName)"><el-icon><i-ep-view/></el-icon>查看数据</el-button><el-button type="success" size="small" @click="exportData(row.tableName)"><el-icon><i-ep-download/></el-icon>导出</el-button></template></el-table-column></el-table></el-card></el-col></el-row><el-row :gutter="20" class="quick-actions"><el-col :span="24"><el-card><template #header><span class="card-title"><el-icon><i-ep-lightning/></el-icon>快速操作</span></template><div class="action-buttons"><el-button type="primary" size="large"><el-icon><i-ep-grid/></el-icon>数据表结构管理</el-button><el-button type="success" size="large"><el-icon><i-ep-house/></el-icon>建筑基础信息</el-button><el-button type="warning" size="large"><el-icon><i-ep-office-building/></el-icon>用户信息管理</el-button><el-button type="info" size="large"><el-icon><i-ep-shop/></el-icon>商超管理</el-button></div></el-card></el-col></el-row></div><div class="fix-notification">已修复数据记录总数显示问题：11101971113 → 1,110,197,111</div></div><script>const { createApp, ref, reactive, computed, onMounted } = Vue;
        const app = createApp({
            setup() {
                const loading = ref(false);
                const systemOnline = ref(true);
                const statistics = reactive({
                    tableCount: 12,
                    totalRecords: "11101971113", // 模拟后端返回的字符串
                    tables: {
                        "建筑基础信息": "1234567",
                        "用户信息": "2345678",
                        "商超": "3456789",
                        "学校": "4567890",
                        "医院": "5678901",
                        "办公楼": "6789012",
                        "工厂": "7890123",
                        "公园": "8901234",
                        "历史建筑": "9012345",
                        "交通设施": "12345678",
                        "其他建筑": "23456789",
                        "系统日志": "34567890"
                    }
                });

                // 修复函数：将数字字符串转换为带千位分隔符的字符串
                const formatNumber = (value) => {
                    if (value === null || value === undefined) return '0';
                    
                    // 确保处理的是数字或字符串数字
                    const num = typeof value === 'string' 
                        ? parseInt(value.replace(/\D/g, ''), 10) 
                        : value;
                    
                    // 格式化为带千位分隔符
                    return num.toLocaleString('zh-CN');
                };

                // 在加载统计数据时应用修复
                const loadStatistics = async () => {
                    loading.value = true;
                    try {
                        // 模拟API调用
                        await new Promise(resolve => setTimeout(resolve, 800));
                        
                        // 应用修复：确保totalRecords是数字字符串
                        statistics.totalRecords = formatNumber(statistics.totalRecords);
                        
                        // 修复每个表的记录数
                        for (const table in statistics.tables) {
                            statistics.tables[table] = formatNumber(statistics.tables[table]);
                        }
                        
                        ElMessage.success('数据加载成功');
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                        ElMessage.error('加载统计数据失败');
                    } finally {
                        loading.value = false;
                    }
                };

                // 建筑数量统计
                const buildingCount = computed(() => {
                    return statistics.tables['建筑基础信息'] || '0';
                });

                // 表格统计数据处理
                const tableStats = computed(() => {
                    return Object.entries(statistics.tables).map(([tableName, recordCount]) => ({
                        tableName,
                        recordCount
                    }));
                });

                // 获取数据量级别
                const getDataLevel = (count) => {
                    const num = parseInt(count.toString().replace(/,/g, '')) || 0;
                    if (num === 0) return '空';
                    if (num < 10) return '少量';
                    if (num < 100) return '中等';
                    if (num < 1000) return '较多';
                    return '大量';
                };

                // 获取记录数标签类型
                const getCountTagType = (count) => {
                    const num = parseInt(count.toString().replace(/,/g, '')) || 0;
                    if (num === 0) return 'info';
                    if (num < 10) return 'warning';
                    if (num < 100) return 'success';
                    return 'primary';
                };

                // 获取状态标签类型
                const getStatusTagType = (count) => {
                    const num = parseInt(count.toString().replace(/,/g, '')) || 0;
                    if (num === 0) return 'info';
                    if (num < 10) return 'warning';
                    if (num < 100) return 'success';
                    return 'primary';
                };

                // 刷新数据
                const refreshData = async () => {
                    await loadStatistics();
                };

                // 查看数据
                const viewData = (tableName) => {
                    ElMessage.info(`查看数据: ${tableName}`);
                };

                // 导出数据
                const exportData = (tableName) => {
                    ElMessage.success(`导出 ${tableName} 数据成功`);
                };

                // 初始化
                onMounted(() => {
                    refreshData();
                });

                return {
                    loading,
                    systemOnline,
                    statistics,
                    buildingCount,
                    tableStats,
                    formatNumber,
                    getDataLevel,
                    getCountTagType,
                    getStatusTagType,
                    refreshData,
                    viewData,
                    exportData
                };
            }
        });

        // 注册Element Plus图标
        app.component('i-ep-data-analysis', ElementPlusIconsVue.DataAnalysis);
        app.component('i-ep-grid', ElementPlusIconsVue.Grid);
        app.component('i-ep-document', ElementPlusIconsVue.Document);
        app.component('i-ep-house', ElementPlusIconsVue.House);
        app.component('i-ep-monitor', ElementPlusIconsVue.Monitor);
        app.component('i-ep-memo', ElementPlusIconsVue.Memo);
        app.component('i-ep-refresh', ElementPlusIconsVue.Refresh);
        app.component('i-ep-view', ElementPlusIconsVue.View);
        app.component('i-ep-download', ElementPlusIconsVue.Download);
        app.component('i-ep-lightning', ElementPlusIconsVue.Lightning);
        app.component('i-ep-office-building', ElementPlusIconsVue.OfficeBuilding);
        app.component('i-ep-shop', ElementPlusIconsVue.Shop);

        app.use(ElementPlus);
        app.mount('#app');</script></body></html>